<template>
  <div class="home">
    <div class="wrapper">
      <!-- 头部 star  -->
      <div class="head">
        <div class="banner">
          <p v-if="bannerLegth==0">暂无活动</p>
          <div v-else-if="bannerLegth!=0">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in banner" :key="item.ct.adId" @click="informationer(item.ct.app_url,item.ct.app_picpath)"><img :src="item.ct.app_picpath" alt=""></van-swipe-item>
          </van-swipe>
          </div>
        </div>
        <div class="header" >
          <router-link tag="div" to="/place" class="header_left">
            {{ this.cityNameAbbr }}
            <span class="iconfont icon-xialajiantou"></span>
          </router-link>
          <router-link tag="div" :to="'/search?back=/home&cityCode='+this.cityCode" class="header_center">搜索目的地/景点/酒店等</router-link>
          <div class="header_right">
            <img :src="require('../assets/img/8r.png')" alt="" />
            <img :src="require('../assets/img/4H.png')" alt="" />
          </div>
        </div>
      </div>
      <!-- 头部 end  -->
      <!-- 分类 star -->
      <div class="type">
        <van-swipe :loop="false">
        <van-swipe-item>
          <ul>
              <li v-for="item in typeLeft" :key="item.ct.adId" @click="type(item.ct.app_url,item.ct.title)">
                <img :src="item.ct.app_picpath" alt="" />
                <span>{{item.ct.title}}</span>
              </li>
            </ul>
          
        </van-swipe-item>
        <van-swipe-item>
          <ul>
              <li v-for="item in typeRight" :key="item.ct.adId" @click="type(item.ct.app_url,item.ct.title)">
                <img :src="item.ct.app_picpath" alt="" />
                <span>{{item.ct.title}}</span>
              </li>
            </ul>
          
        </van-swipe-item>
      </van-swipe>
        <!-- <div class="drop">
          <ul>
            <li class="con"></li>
            <li></li>
          </ul>
        </div> -->
      </div>
      <!-- 分类 end -->

      <!-- 中间图片 star  -->
      <div class="imgs" v-show="havegoimg">
        <img :src="goimg" alt="" />
      </div>
      <!-- 中间图片 end  -->

      <!-- 限时特惠 star  -->
      <div class="discount">
        <div class="discount_title">
          <div class="discount_title_left">
            <img :src="require('../assets/img/A21.png')" alt="" />
            <p>限时特惠</p>
          </div>
          <router-link tag="div" to="/TimeLimit" class="discount_title_right">全部<i class="iconfont icon-qianjin"></i></router-link>
        </div>
        <div class="discount_main">
          <ul>
            <li v-for="item in limit" :key="item.id" @click="information(item.productId,item.coverImageUrl)">
              <div class="img">
                <img :src="item.coverImageUrl" alt="" />
              </div>
              <div class="word">
                <p>{{item.packageName}}</p>
                <p>{{item.hotelScenicName}}</p>
              </div>
              <div class="bgimg">
                <p>￥{{item.originPrice}}</p>
                <p><span>￥</span>{{item.sellPrice}}起</p>
              </div>
            </li>
            
            <router-link tag="li" to="/TimeLimit">点击查看更多<i class="iconfont icon-zuoshuangjiantou"></i></router-link>
          </ul>
        </div>
      </div>
      <!-- 限时特惠 end -->

      <!-- 目的地精选 star  -->
      <!-- <div class="selected">
        <h3>目的地精选</h3>
        <div class="select_main">
          <ul>
            <li>
              <div class="img">
                <img :src="require('../assets/img/one.jpg')" alt="" />
              </div>
              <p>从化温泉旅游区</p>
            </li>
            <li>
              <div class="img">
                <img :src="require('../assets/img/one.jpg')" alt="" />
              </div>
              <p>从化温泉旅游区</p>
            </li>
            <li>
              <div class="img">
                <img :src="require('../assets/img/one.jpg')" alt="" />
              </div>
              <p>从化温泉旅游区</p>
            </li>
          </ul>
        </div>
      </div> -->
      <!-- 目的地精选 end -->

      <!-- 精品周边游 star -->
      <div class="boutique" v-if="this.selected">
        <h3>精品周边游</h3>
        <div class="boutique_main">
          <ul>
            <li @click="information(item.productId,item.bigImageUrl)" to="/details" v-for="item in selected" :key="item.productId">
              <div class="img">
                <img :src="item.bigImageUrl" alt="" />
              </div>
              <p>
                {{item.productName}}-{{item.productTitleContent}}
              </p>
              <div class="tedian">
                <ul>
                  <li>可定今日</li>
                  <li v-for="items in item.tags" :key="items">{{items}}</li>
                  
                </ul>
              </div>
              <div class="price">
                <div class="price_l">
                  <p><span>￥</span><span class="yang">{{item.price}}</span> 起</p>
                  <p>￥{{item.retailPrice}}</p>
                  <p>已售{{item.saledCount}}</p>
                </div>
                <div class="price_r">{{item.cityName}}</div>
              </div>
            </li>
            
          </ul>
        </div>
      </div>
      <!-- 精品周边游 end  -->
    </div>
  </div>
</template>

<script>
import { getJsonHomeData} from "../api/Home.js";
import { getJsonHomelimitData } from "../api/homelimit.js";
import { getJsonHomeSelectedData} from "../api/comment.js";
export default {
  props: ["cityNameAbbr", "cityId","cityCode"],
  data() {
    return {
      banner:null,
      typeLeft:null,
      typeRight:null,
      goimg:null,
      limit:null,
      selected:null,
      bannerLegth:null,
      havegoimg:null,
    };
  },
  methods: {
    information(productId,productImg){
      this.$router.push("/details?back=/home&productId="+productId+"&productImg="+productImg)
    },
    informationer(productId,productImg){
      console.log(productId);
      console.log(productImg);
     let index= productId.split("").findIndex(item=>{
        return item=="&"
      })
      console.log(index);
      let id=productId.slice(0,index)
      console.log(id);
      this.$router.push("/details?back=/home&productId="+id+"&productImg="+productImg)
    },
    type(app_url,title){
      if(app_url=='971' || app_url=='966'|| app_url=='967'|| app_url=='785'|| app_url=='904'|| app_url=='844'|| app_url=='1227'|| app_url=='842'|| app_url=='965'|| app_url=='1235'|| app_url=='1233'|| app_url=='1237'|| app_url=='1078'){
        this.$router.push("/HomeType?app_url="+app_url + "&title=" +title+ "&cityCode=" +this.cityCode)
      }
    }
  },
  created(){
    getJsonHomeData({area_code:this.cityCode}).then((data)=>{
      this.banner=data.content.filter(item=>{
       return  item.operateId=="5"
      })
      this.banner=this.banner[0].ad
      this.bannerLegth=this.banner.length
      console.log(this.banner);

      this.typeLeft=data.content.filter(item=>{
        return item.operateId=="11"
      })
      this.typeRight=this.typeLeft[0].ad.slice(10,this.typeLeft[0].ad.length)
        this.typeLeft=this.typeLeft[0].ad.slice(0,10)

      this.goimg=data.content.filter(item=>{
        return item.operateId=="28"
      })
      this.havegoimg=this.goimg[0].ad.length
      console.log(this.havegoimg);
      if(this.havegoimg!=0){

        this.goimg=this.goimg[0].ad[0].ct.app_picpath
        console.log(this.goimg); 
      }
      
    })

    
    getJsonHomelimitData({cityCode:this.cityCode}).then((data)=>{
      this.limit=data.content.data
      console.log(this.limit);
    })
    // getJsonaaaaaData({cityCode:this.cityCode}).then((data)=>{
    //   console.log(data);
    // })
    getJsonHomeSelectedData({cityCode:this.cityCode}).then((data)=>{
      this.selected=data.content.content
      console.log(this.selected);
    })
  }
};
</script>

<style lang="scss" scoped>
.home {
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    // padding-bottom: 60px;
  }
  .head {
    position: relative;
    .banner {
      padding-top: 50px;
      height: 180px;
      &>p{
        text-align: center;
        line-height: 180px;
        font-size: 20px;
        color: #f5c87f;
      }
      img {
        width: 100%;
        height: 180px;
        display: block;
      }
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        height: 180px;
        line-height: 180px;
        text-align: center;
        background-color: #39a9ed;
      }
    }
  }
  .header {
    height: 50px;
    line-height: 50px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    background-color: #f5c87f;
  }
  .header_left {
    color: #fff;
    padding: 0 10px;
  }
  .header_center {
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    font-size: 12px;
    padding-left: 35px;
    flex: 1;
    background: url(../assets/img/8v.png) 13px center no-repeat;
    background-size: 14px;
    color: #999;
    background-color: rgba(255, 255, 255, 0.386);
  }
  .header_right {
    display: flex;
    padding: 0 10px;
    img {
      vertical-align: middle;
      width: 25px;
      padding-left: 5px;
    }
  }
  .type {
    padding-top: 2.8%;
    padding-bottom: 4%;
    background-color: #fff;
      ul {
      display: flex;
      flex-wrap: wrap;
      li {
        display: flex;
        flex-direction: column;
        width: 20%;
        align-items: center;
        font-size: 11px;
        &:nth-child(-n + 5) {
          padding-bottom: 1.8%;
        }
      }
      img {
        width: 54%;
      }
      span {
        height: 33px;
        line-height: 33px;
      }
    }
    .van-swipe ::v-deep .van-swipe__indicator{
      height: 2px;
      width: 10px;
      border-radius: 0%;
      background-color: rgb(151, 151, 151);
      margin: 0;
    }
    .van-swipe ::v-deep .van-swipe__indicator--active{
      background-color: rgb(240, 168, 45);
    }
    .van-swipe ::v-deep .van-swipe__indicators{
      bottom: 0;
    }
    .van-swipe-item{
      padding-bottom: 10px;
    }
  }

}
.imgs {
  margin: 0 16px 20px 16px;
  img {
    width: 100%;
    height: 110px;
    display: block;
  }
}
h3{
  margin: 10px 0;
}
.discount {
  padding-top: 14px;
  margin: 0 16px 30px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-image: linear-gradient(rgb(254, 247, 223), #fff);
  .discount_title {
    margin: 0 10px 14px;
    display: flex;
    justify-content: space-between;
  }
  .discount_title_left {
    display: flex;
    align-items: center;
    img {
      width: 24px;
      height: 24px;
    }
    p {
      font-size: 18px;
      padding-left: 10px;
      color: rgb(92, 85, 56);
    }
  }
  .discount_title_right {
    padding: 5px 6px 5px 8px;
    font-size: 14px;
    border-radius: 14px;
    font-weight: bold;
    color: #ed5b00;
    border: 1px solid rgb(212, 170, 31);
    i{
      font-size: 12px;
      padding-left: 3px;
    }
  }
}
.discount_main {
  overflow-y: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
  ul {
    padding-left: 10px;
    display: flex;
    width: 880px;
    li {
      padding-right: 10px;
      width: 155px;
      &:last-of-type {
        width: 28px;
        color: rgb(185, 140, 82);
        text-align: center;
      }
      img {
        border-radius: 8px;
        width: 100%;
        height: 124px;
      }
    }
  }
  .word {
    padding-top: 5px;
    p {
      &:nth-child(1) {
        font-size: 14px;
        padding: 0 8px;
        font-weight: bold;
        text-align: left;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      &:nth-child(2) {
        font-size: 12px;
        padding: 0 8px;
        color: #999;
        text-align: left;
        line-height: 35px;
      }
    }
  }
  .bgimg {
    background: url(../assets/img/xB.png) no-repeat;
    background-size: 100%;
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    font-weight: bold;
    p {
      &:nth-child(1) {
        color: rgb(147, 98, 35);
        text-decoration: line-through;
      }
    }
  }
}
.discount_main .bgimg p:nth-child(1),
span {
  font-weight: normal;
  font-size: 14px;
}
.selected {
  margin: 0 16px;
  .select_main {
    ul {
      width: 100%;
      display: flex;
    }
  }
}
/* .selected .select_main{
    overflow-y: hidden;
} */
.select_main {
  ul {
    li {
      width: 33%;
      .img {
        padding-right: 5px;
      }
      img {
        width: 100%;
        border-radius: 5px;
      }
      p {
        font-size: 15px;
      }
    }
  }
}
.boutique {
  margin: 0 16px;
  font-size: 15px;
}
.boutique_main {
  & > ul {
    & > li {
      margin-bottom: 20px;
      .img{
        height: 150px;
        width: 100%;
        img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
      }
      & > p {
        line-height: 20px;
        margin-top: 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
  .tedian {
    margin: 10px 0;
    ul {
      display: flex;
      li {
        font-size: 13px;
        margin-right: 5px;
        padding: 0 6px;
        background-color: #f0eee3;
        color: rgb(94, 93, 93);
        border-radius: 5px;
        &:nth-child(1) {
          background-color: rgb(216, 253, 219);
          color: rgb(8, 208, 5);
        }
      }
    }
  }
  .price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 10px;
    color: #999;
    .price_l {
      display: flex;
      align-items: baseline;
      p {
        margin-right: 12px;
        &:nth-child(1) {
          span {
            color: #000;
            &.yang {
              font-size: 20px;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}

</style>